<template>
	<view class="MeAddress"> 
		<view class="address-content" v-if="addList.length > 0">
			<view class="address-item" v-for="(item,index) in addList" :key="item.id" @click="handleChange(item)">
				<view class="item-top">
					<text>{{item.name}}</text>
					<text>{{item.phoneNumber}}</text>
				</view>
				<view>{{item.detailAddress}}</view>
				<view class="item-edit">
					<view class="address-item-select">
					  <view class="address-item-sonSelect" @click.stop="handleSetdefult(item.id)">
							<image v-if="item.defaultStatus == 1" src="@/static/d1.png"></image>
							<view v-else class="d2"></view>
						</view> 
						<view class="address-item-title">{{item.defaultStatus == 1?'默认地址':'设为默认'}}</view>  
					</view>
					<view class="edit">
						<view @click.stop="handleToEdit(item)">
							<image src="@/static/d3.png" style="width:15px;height:15px"></image>
						</view>
						<view @click.stop="handleDelete(item.id)">
							<image src="@/static/d4.png"></image> 
						</view>
					</view>
				</view>
			</view>
		</view>
	 	<view class="null" v-else> 
			<u-empty text="还没收货地址,快去添加吧" icon="/static/e.png" marginTop="100" ></u-empty>
		</view>  
 
		<view class="address-btm" @click="toAddAddress">添加地址</view>
	 
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				addList: [], 
				order_id:'',
				changeOrder:false,
				chooseAddress:false,
			}
		},
		onLoad(options) { 
		  this.getAddressList()
		   if(options.order_id){
			   this.order_id = options.order_id
			   this.changeOrder = true
		   }
		   if(options.choose == 1){
			   this.chooseAddress = true
		   }
		},
		onShow() {
			//获取用户地址列表
			 
		},
		methods: {
			handleChange(item) {
				if(this.chooseAddress){
					 let pages = getCurrentPages()
					 let prePages = pages[pages.length - 2].$vm 
					 prePages.addressInfo = item
					 prePages.addressInfo.id = item.id
					 uni.navigateBack()
				 }
			},
			// 获取用户地址列表
			getAddressList() {
				this.$http({
					url: '/member/address/list', 
					method:"get"
				}).then(data => {
					this.addList = data 
				})
			},
			//是否为默认地址
			 handleSetdefult(id) { 
				 this.$http({
					url: '/member/address/update',
					method: 'post',
					data: {
						id, 
						defaultStatus:1
					}
				}).then(() => {
					this.getAddressList()
				})
			},
			// 删除地址
			handleDelete(id) {
				uni.showModal({
					content: '确定删除地址吗',
					success: (res) =>{
						if (res.confirm) {
							this.$http({
								url: `/member/address/delete/${id}`,
								method: 'POST',
								data: {id}
							}).then(res => {
								uni.showToast({
									title: "删除成功",
									icon: "none", 
								});
								this.getAddressList()
							})
						} else if (res.cancel) {
						}
					}
				});  
			},
			//编辑地址
			handleToEdit(item) {
				uni.navigateTo({
					url: './add?id=' + item.id
				})
			},
			//跳转到添加地址页面
			toAddAddress() {
				uni.navigateTo({
					url: "./add"
				})
			}
		}
	}
</script>

<style>
	page{ 
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.MeAddress {
		width: 100%; 

		.back {
			position: absolute;
			left: 20rpx;
			top: 90rpx;
		}

		.top {
			position: relative;
			width: 100%;
			height: 160rpx;
			background-color: #fff;

			>text {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 200rpx;
				height: 50rpx;
				margin-top: 10rpx;
				margin-left: -68rpx;
			}
		}

		.null {
			width: 588rpx;
			height: 488rpx;
			margin: 0 auto;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.address-content {
			margin-top: 20rpx;
			margin-bottom: 170rpx;

			.address-item {
				width: 690rpx;
				margin: 0 auto 20rpx;
				padding: 30rpx 15rpx 20rpx 20rpx;
				background: #ffffff;
				border-radius: 10rpx;
				box-sizing: border-box;

				.item-top {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-weight: 700;
					color: #020202;

					>text:nth-child(1) {
						margin-right: 10rpx;
					}
				}

				>view:nth-child(2) {
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #999999;
					border-bottom: 1px solid #E6E6E6;
				}



				.item-edit {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.address-item-select {
						display: flex;
						align-items: center;
						color: #4D4D4D;

						.address-item-sonSelect { 
								height: 24rpx;
							.d2{
								width: 24rpx;
								height: 24rpx;
								border: 1px solid #333333;
							}
							image { 
								display: block;
								width: 28rpx;
								height: 28rpx; 
							}
						}

						.address-item-title {
						font-size: 24rpx;
						color: #999999;
							margin-left: 8rpx;
						}
					}

					.edit {
						display: flex;
						align-items: center;

						>view {
							display: flex;
							align-items: center;
							margin-left: 40rpx; 
							color: #333333;

							>image {
								margin-right: 8rpx;
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
				}
			}
		}

		.address-btm {
			position: fixed;
			width: 690rpx;
			height: 90rpx;
			left: 50%;
			bottom: 50rpx;
			transform: translate(-50%);
			line-height: 90rpx;
			text-align: center;
			background: #020202;
			border-radius: 50px;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
